<template>
  <div class="account_item_box">
    <div class="account_avatar">
      <!-- <el-avatar size="large" :src="userAvatar" /> -->
      <avatar size="50px" :imageUrl="userAvatar"></avatar>
    </div>
    <div class="account_info">
      <span class="info">用户ID:{{ uid }}</span>
      <span class="info">用户名:{{ userName }}</span>
      <span class="info">注册日期:{{ createDate }}</span>
      <span class="info">简介:{{ description }}</span>
    </div>
    <div class="account_info" style="width: 10%;">
      <span class="info">账号状态:
        <!-- <span class="info" ref="userState">{{ state === true ? '正常' : '封禁' }}</span> -->
        <el-text :type="ShowState">{{ props.state === true ? '正常' : '封禁' }}</el-text>
      </span>
    </div>
    <div class="account_handle">
      <el-link type="danger" v-if="state === true" @click="HandleUserState(1)">账号封禁</el-link>
      <el-link type="primary" v-else @click="HandleUserState(2)">账号解禁</el-link>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, toRefs } from "vue"
import devURL from '../Config/NetBaseConfig.js'
import Avatar from "./Avatar.vue";

const userState = ref(null);
let textColor = ref('primary')
const avatarState = ref({
  circleUrl:
    'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
  squareUrl:
    'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png',
  sizeList: ['small', '', 'large'],
})

let props = defineProps({
  uid: "",
  userName: '',
  createDate: "",
  description: {
    type: String,
    default: '你好，世界'
  },
  avatar: "",
  state: '',
})

let emits = defineEmits(['ChangeUserState'])

let dynamicsData = computed(() => {
  return toRefs(props)
})


//标示用户当前状态颜色
const ShowState = computed(() => {
  if (props.state) {
    textColor.value = 'success'
  } else {
    textColor.value = 'danger'
  }
  return textColor.value
})

const ShowUserState = () => {
  if (dynamicsData.value.state.value === true) {
    userState.value.style.color = "green"
  } else {
    userState.value.style.color = "red"
  }
}

const HandleUserState = (status) => {
  let uid = dynamicsData.value.uid.value
  emits('ChangeUserState', { uid, status })
}

let userAvatar = computed(() => {
  if (dynamicsData.value.avatar.value === "" || dynamicsData.value.avatar.value === null) {
    return new URL("../assets/Image/temp.png", import.meta.url).pathname
  }
  let url = dynamicsData.value.avatar.value
  let result = url.substring(url.lastIndexOf("/images/"));
  return result
})

</script>

<style lang='less' scoped>
.account_item_box {
  padding: 0 1rem 0 1rem;
  width: 98%;
  height: 15vh;
  border: 1px solid #ccc;
  border-radius: 1rem;
  box-shadow: 0.1rem 0 0.15rem 0.15rem rgba(204, 204, 204, .3);
  display: flex;
  justify-content: start;
  align-items: center;
  transition: all .5s ease;

  &:hover {
    transform: translate(-0.15rem, -0.15rem);
    box-shadow: 0.2rem 0.2rem 0.3rem 0.3rem rgba(204, 204, 204, .3);
  }

  .account_avatar {
    // flex: 0.5;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 2rem;
  }

  .account_info {
    // flex: 1;
    width: 75%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;

    .info {
      font-size: 14px;
    }
  }

  .account_handle {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    height: 100%;

    .handle_item {
      display: inline-block;
      font-size: 18px;
      user-select: none;
      cursor: pointer;

      &:hover {
        text-decoration: underline;
      }
    }
  }
}
</style>